<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
  FormInfo,
  InfoContainer,
  FormInfoInput
} from "@/views/qualityInspection/components";
import { protocolList } from "./assets/protocolList.js";
import { Search } from "@element-plus/icons-vue";
import componentList from "./components/index.js";

defineOptions({
  name: "AppProtocolConfig"
});

// Head -------------------------------
// 接口/协议信息
// 没想到好办法watch formHeadInfo来监听选择值得变化哈哈，
// const formHeadInfo = ref(null);
// const formHeadList = reactive({
//   array: [
//     {
//       id: 1,
//       title: "端口",
//       inputType: "0",
//       placeholder: "请输入",
//       options: [
//         {
//           label: "无接口",
//           value: "无接口"
//         },
//         {
//           label: "RJ45_1",
//           value: "RJ45_1"
//         },
//         {
//           label: "RJ45_2",
//           value: "RJ45_2"
//         }
//       ]
//     },
//     {
//       id: 2,
//       title: "协议",
//       inputType: "0",
//       placeholder: "请选择",
//       options: protocolList
//     }
//   ]
// });
// 获取Head参数信息
// console.log(formHeadInfo.value[0].value);
// console.log(formHeadInfo.value[1].value);
// ------------------------------- Head

// Center -------------------------------


// ------------------------------- Center


// Footer -------------------------------
const finish = () => {
  console.log("完成");
};
const cancel = () => {
  console.log("取消");
};
// ------------------------------- Footer

onMounted(() => {});
watch(
  () => [],
  () => {}
);
</script>

<template>
  <div class="app-pc">
    <el-row class="app-pc-head">
      <InfoContainer>
        <!-- 顶部信息 -->
        <el-row :gutter="20" justify="start">
          <!-- <el-col v-for="item in formHeadList.array" :span="6">
            <FormInfoInput
              ref="formHeadInfo"
              :key="item.id"
              :title="item.title"
              :options="item.options"
              :placeholder="item.placeholder"
              :inputType="item.inputType"
            />
          </el-col> -->
          header
        </el-row>
      </InfoContainer>
    </el-row>
    <el-row class="app-pc-center" :gutter="20">
      <el-col :span="16">
        <InfoContainer title="参数设置"> </InfoContainer>
      </el-col>
      <el-col :span="8">
        <el-row>
          <InfoContainer class="pc-center-right-top" title="协议更新与部署">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-progress
                  :percentage="compileRate"
                  :text-inside="true"
                  :stroke-width="30"
                />
              </el-col>
              <el-col :span="4">
                <el-button
                  link
                  type="primary"
                  @click="compileClick"
                  :disabled="compileDisabled"
                  >编译</el-button
                >
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-progress
                  :percentage="issueRate"
                  :text-inside="true"
                  :stroke-width="30"
                />
              </el-col>
              <el-col :span="4">
                <el-button
                  link
                  type="primary"
                  @click="issueClick"
                  :disabled="issueDisabled"
                  >下发</el-button
                >
              </el-col>
            </el-row>
          </InfoContainer>
        </el-row>
        <el-row style="margin-top: 2vh">
          <InfoContainer class="pc-center-right-bottom" title="适配状态">
            <el-row>
              <el-button :icon="Search">查询协议适配状态</el-button>
            </el-row>
            <el-row>
              <el-button :icon="Search">查询边缘网关状态</el-button>
            </el-row>
            <el-row>
              <el-col>
                <span>协议适配状态</span>
              </el-col>
              <el-col>
                <el-tag class="custom-tag">{{ protocolStatus }}</el-tag>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <span>边缘网关状态</span>
              </el-col>
              <el-col>
                <el-tag class="custom-tag">{{ gatewayStatus }}</el-tag>
              </el-col>
            </el-row>
          </InfoContainer>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="app-pc-footer">
      <InfoContainer title="状态栏">
        <el-row :gutter="20" justify="end">
          <el-col :span="3">
            <el-button class="app-pc-btn" type="primary" @click="finish">
              完成
            </el-button>
          </el-col>
          <el-col :span="3">
            <el-button class="app-pc-btn" @click="cancel">取消</el-button>
          </el-col>
        </el-row>
      </InfoContainer>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.app-pc {
  .app-pc-head {
  }
  .app-pc-center {
    margin-top: 2vh;
    height: 60vh;
    .pc-center-right-top {
      height: 20vh;
      .el-row {
        margin-bottom: 1vh;
      }
      overflow: hidden;
    }
    .pc-center-right-bottom {
      height: calc(60vh - 2vh - 20vh);
      .custom-tag {
        width: 200px;
        background-color: #f5f7fa;
      }
      .el-row {
        margin-bottom: 2.5vh;
      }
      overflow: hidden;
    }
  }
  .app-pc-footer {
    margin-top: 2vh;
    .app-pc-btn {
      width: 100%;
    }
  }
}
</style>
